<template>
  <div id="can1"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { init, use, dispose } from "echarts/core";
import {
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  TitleComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";

let myChart, myCanvas;
onMounted(() => {
  use([
    CanvasRenderer,
    GridComponent,
    TooltipComponent,
    DatasetComponent,
    TitleComponent,
    LineChart,
  ]);
  myCanvas = document.getElementById("can1");
  myChart = init(myCanvas);
  let option = {
    title: {
      text: "dataset后台数据配合encode映射数据",
      left: "center",
    },
    xAxis: {
      type: "category",
    },
    yAxis: {},
    tooltip: {},
    dataset: {
      // 二维数组，其中第一行/列可以给出 维度名，也可以不给出，直接就是数据：
      source: [
        { time: "2024-1-1", value: 1000 },
        { time: "2024-1-2", value: 2000 },
        { time: "2024-1-3", value: 3000 },
      ],
    },
    series: [
      {
        type: "line",
        encode: {
            x: 'time',
            y: 'value'
        }
      },
    ],
  };
  myChart.setOption(option);
});

onUnmounted(() => {
  dispose(myChart);
  myChart = null;
});
</script>

<style>
#can1 {
  width: 800px;
  height: 400px;
}
</style>
